<template>
	<view class="container">
		<image src="/static/bg.png" class="bg" mode=""></image>
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-40">
				<view class="waibOx p-r">
					阅读报告
				</view>
			</view>
		</view>
		<view class="body p-20">
			<!-- 上面的tabs -->
			<view class="tabs f f-a-c f-j-b">
				<view class="left f f-a-c f-j-b">
					<view class="yarn " @click="tabsQie(0)" :class="{act:ind==0}">
						年度
					</view>
					<view class="yarn" @click="tabsQie(1)" :class="{act:ind==1}">
						月度
					</view>
					<view class="yarn" @click="tabsQie(2)" :class="{act:ind==2}">
						累计
					</view>
				</view>
				<view @click="goTan" class="right f f-a-c f-j-c">
					<image src="/static/my/back.png" class="back" mode=""></image>
					分享海报
				</view>
			</view>
			<!-- 时间-------------------- -->
			<view @click="show=true" v-show="status" class="times f f-a-c">
				{{ind==0?defaultTime.split('-')[0]:defaultTime}}
				<image src="/static/12.png" class="jiajian" mode=""></image>
			</view>
			<view class="xian">

			</view>
			<!-- 这个是读书时长···························· -->
			<view class="progressBar">
				<view class="topName f f-a-c">
					读书会时长：<view class="time">
						{{timeFn(book_club_duration)}}
					</view>
				</view>
				<!-- 	<u-line-progress active-color="#009d85" height="24" :show-percent="false"
					:percent="num"></u-line-progress> -->
			</view>
			<demo :listNum="list"></demo>
			<!-- <view @click="goTo">跳转</view> -->
			<view class="" v-if="static">
				<scheh @cloneR="cloneRs"></scheh>
			</view>
		</view>
		<!-- 时间 -->
		<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaultTime"
			v-model="show"></u-picker>
	</view>
</template>

<script>
	import scheh from "@/pageA/scheh.vue"
	import demo from "@/pageA/demo.vue"
	export default {
		components: {
			scheh,
			demo
		},
		data() {
			return {
				status: true,
				list: [],
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				defaultTime: '2023-01',
				show: false,
				static: false,
				ind: 0,
				num: 50,
				book_club_duration: '',
				imgUrl: ''
			}
		},
		onReady() {
			let date = new Date()
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			this.defaultTime = year + '-' + month
			// this.defaultTime = '2023-07'
		},
		onShow() {
			this.initTu()
			this.initCode()
			// this.chooseavatarFn()
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		watch: {
			ind(newVal, oldVal) {
				this.initTu()
			}
		},
		methods: {
			timeFn(seconds) {
				// let seconds = 80
				var hours = Math.floor(seconds / 3600); // 将秒数转换为小时数
				var minutes = Math.floor((seconds % 3600) / 60); // 将剩余的秒数转换为分钟数
				var remainingSeconds = seconds % 60; // 获取剩余的秒数
				var paddedHours = hours;
				var paddedMinutes = minutes;
				var paddedSeconds = remainingSeconds;
				// 返回分钟和秒数的对象
				if (paddedHours != 0) {
					return paddedHours + 'h' + paddedMinutes + 'min'
				} else if (paddedMinutes != 0) {
					return paddedMinutes + 'h'
				}
				return paddedSeconds + 's'
			},
			// 上传图片
			// chooseavatarFn() {
			// 	uni.uploadFile({
			// 		url: uni.getStorageSync('upload_domain'), // 上传地址
			// 		filePath: '/static/scher/10.png', // 要上传的文件路径
			// 		name: 'file', // 上传文件对应的 key 值
			// 		method: 'POST',
			// 		formData: {
			// 			key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
			// 			token: uni.getStorageSync('upload_token'),
			// 		},
			// 		success: (uploadRes) => {
			// 			// 上传成功处理逻辑
			// 			let url = JSON.parse(uploadRes.data).key
			// 			let bg = uni.getStorageSync('domain') + '/' + url
			// 			uni.setStorageSync('bg', bg)
			// 		},
			// 		fail: function(error) {
			// 			// 上传失败处理逻辑
			// 			console.log(error, '111111111111111');
			// 		},
			// 		complete: function() {}
			// 	});
			// 	uni.uploadFile({
			// 		url: uni.getStorageSync('upload_domain'), // 上传地址
			// 		filePath: '/static/scher/1.png', // 要上传的文件路径
			// 		name: 'file', // 上传文件对应的 key 值
			// 		method: 'POST',
			// 		formData: {
			// 			key: `${this.$u.timeFormat(new Date(), 'yyyy-mm-dd')}/${this.randomString()}.png`,
			// 			token: uni.getStorageSync('upload_token'),
			// 		},
			// 		success: (uploadRes) => {
			// 			// 上传成功处理逻辑
			// 			let url = JSON.parse(uploadRes.data).key
			// 			let img = uni.getStorageSync('domain') + '/' + url
			// 			uni.setStorageSync('img', img)
			// 		},
			// 		fail: function(error) {
			// 			// 上传失败处理逻辑
			// 			console.log(error, '111111111111111');
			// 		},
			// 		complete: function() {}
			// 	});
			// },
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
			async initCode() {
				let n = await this.$api.Qrcode()
				this.imgUrl = n.data.url
			},
			async initTu() {
				let n = await this.$api.Report({
					type: this.defaultTime,
					month: this.ind == 0 ? 'year' : this.ind == 1 ? 'month' : 'total'
				})
				this.list = n.data.stats
				this.book_club_duration = n.data.book_club_duration
			},
			// /点击确认
			confirmFn(e) {
				console.log(e);
				this.defaultTime = e.year + '-' + e.month
				this.initTu()
			},
			// /关闭弹出层
			cloneRs() {
				this.static = false
			},
			// /跳转到弹窗
			goTan() {
				console.log('8888888');
				this.static = true

				// uni.navigateTo({
				// 	url: '/pageA/demo2'
				// })
			},
			// /切换
			tabsQie(num) {
				if (num == 2) {
					this.status = false
				} else {

					this.status = true
				}
				this.ind = num
			},
			// goTo() {
			// 	console.log('1111');
			// 	uni.navigateTo({
			// 		url: '/pageA/demo'
			// 	})9787566426277
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.jiajian {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}

	.xian {
		width: 95%;
		height: 2rpx;
		margin: 0 auto;
		background-color: #f4f4f4;
		margin: 10rpx auto;

	}

	.times {
		margin: 15rpx 0;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
	}

	.progressBar {
		width: 90%;
		margin: 35rpx 0;

		.topName {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
		}

		.time {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #009D85;
		}
	}

	.tabs {
		.right {
			padding: 15rpx 10rpx;
			background-color: #e8f6f4;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #009d85;
			border-radius: 30rpx;

			.back {
				width: 30rpx;
				height: 26rpx;
			}
		}

		.left {
			width: 460rpx;
			height: 64rpx;
			background: #f8f8f8;
			border-radius: 32rpx;
			padding: 0 10rpx;

			.yarn {
				width: 158rpx;
				height: 52rpx;
				line-height: 50rpx;
				background: #f8f8f8;
				border-radius: 26rpx;
				border-radius: 32rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #999999;
			}

			.act {
				width: 158rpx;
				height: 52rpx;
				line-height: 50rpx;
				background: #ffffff;
				border-radius: 26rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #009d85;
			}
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 338rpx;
	}

	.userAvar {
		// position: fixed;
		// top: 0%;
		// left: 0;
		height: 180rpx;
		width: 100%;
		// background-color: #fff;
		z-index: 99;
	}

	.topHeacd {
		height: 70rpx;
	}

	.body {
		height: calc(100vh - 180rpx);
		overflow-y: auto;
		background-color: #fff;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;

		// background-color: pink;
		.inp {
			width: 100%;
			height: 72rpx;
			background: #ffffff;
			border-radius: 36rpx;
			padding-left: 50rpx;
		}

	}

	.waibOx {
		width: 60%;
		font-weight: 600;
	}
</style>